<template>
	<view>
		<scroll-view @scrolltolower="lower" :style="{height:data.clientHeight+'px'}" id="scrollT" scroll-y="true">
			<!-- 热门俱乐部 -->
			<view class="club-box">
				<view class="title">热门俱乐部</view>
				<view class="club-con flex-justify-s">
					<navigator hover-class="none" class="club-item" v-for="(item,index) in data.clubList" :key="index"
						:url="`/pages/club/club?id=${item.enterpriseId}`">
						<img class="bgi" :src="item.background" alt="">
						<img class="head-img" :src="item.logo" alt="">
						<view class="club-info">
							<view class="club-name">{{item.enterpriseName}}</view>
							<view class="club-num">成员{{item.enterpriseMemberNum}}人</view>
						</view>
					</navigator>

				</view>

			</view>
			<!-- 热门活动 -->
			<view class="events">
				<view class="rm-box">
					<view class="title">热门活动</view>
				</view>
				<view class="events-list">
					<clubItem v-for="(item,index) in data.gameList" :key="index" :item="item"></clubItem>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		defineProps,
		defineExpose
	} from 'vue';
	import {
		setScrollHeight
	} from '@/utils/uitls.js';
	import clubItem from '@/compoments/discover/clubItem.vue';
	import {
		echoRecommend
	} from "../../requestApi/api.js";
	const props=defineProps(['city']);
	
	const data = ref({
		clientHeight: 0, //scroll-view 可滚动高度
		clubList: [],
		gameList: [],
		form:{
			"current": 1,
			"size": 10,
			address:''
		},
		isLoading: false,
		isComplete: false,
	})
	const instance = getCurrentInstance();
	onMounted(() => {

		setScrollHeight("#scrollT", instance).then(res => {
			data.value.clientHeight = res;
		});
		data.value.form.address=props.city;
		getList();


	});
	//切换城市
	const changeCity=()=>{
		data.value.gameList = [];
		data.value.form.current=1;
		data.value.isComplete = false;
		getList();
	};
	defineExpose({data,changeCity})
	//触底
	const lower=()=>{
		!data.value.isLoading && !data.value.isComplete && getList();;
	};

	const getList = () => {
		data.value.isLoading=true;
		echoRecommend(data.value.form).then(res => {
			data.value.clubList = res.data.enterpriseShowHotResponses;
			data.value.isLoading=false;
			console.log(res.data.gameInfoWXResponseIPage.records)
			data.value.gameList = data.value.gameList.concat(res.data.gameInfoWXResponseIPage.records);
			data.value.form.current++;
			data.value.isComplete=!res.data.gameInfoWXResponseIPage.records.length;
		})
	};
</script>

<style lang="less">
	.title {
		font-size: 32rpx;
		color: #2C2C2C;
		font-weight: bold;

	}

	.club-box {
		padding: 40rpx 40rpx 0;

		.club-con {
			margin-top: 54rpx;

			.club-item {
				width: 212rpx;
				height: 158rpx;
				box-shadow: 0rpx 16rpx 28rpx rgba(1, 0, 44, 0.03);
				border-radius: 16rpx;
				position: relative;

				.bgi {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}

				.head-img {
					width: 92rpx;
					height: 64rpx;
					box-shadow: 0rpx 16rpx 28rpx rgba(1, 0, 44, 0.03);
					border-radius: 50rpx;
					position: absolute;
					left: 20rpx;
					top: -15%;

				}

				.club-info {
					position: absolute;
					left: 20rpx;
					top: 56rpx;

					.club-name {
						font-size: 28rpx;
						color: #FFFFFF;
					}

					.club-num {
						font-size: 22rpx;
						color: #FFFFFF;
						opacity: 0.52;
					}
				}

			}
		}

	}

	.events {
		.rm-box {
			padding: 0 40rpx;
			margin-bottom: 32rpx;
		}

		margin-top: 32rpx;

	}
</style>